<template>
  <div>
    <Search :search='search' :reset='reset'>
      <template v-slot:body>
        <el-form-item label='标题' prop='jump_title'>
          <el-input v-model='query.jump_title' name='jump_title' clearable />
        </el-form-item>
      </template>
    </Search>
    <div class='table-default'>
      <Operate :show="open">
<!--        <template #operate>-->
<!--          <el-button @click="download('/bill/export'+queryParams(query))" v-action="'bill.Bill.export'">导出</el-button>-->
<!--        </template>-->
      </Operate>
      <el-table :data='tableData' class='mt-3' v-loading='loading'>
        <el-table-column prop='jump_title' label='标题' />
        <el-table-column prop='jump_count' label='访问次数' />
        <el-table-column prop='jump_country' label='国家' />
        <el-table-column prop='ban_computer' label='屏蔽PC'>
          <template #default="scope">
            <div v-if='scope.row.ban_computer == 1'>
              否
            </div>
            <div style="color: #ff0000" v-else>
              是
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='ban_tablet' label='屏蔽平板'>
          <template #default="scope">
            <div v-if='scope.row.ban_tablet == 1'>
              否
            </div>
            <div style="color: #ff0000" v-else>
              是
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='ban_mobile' label='屏蔽手机' >
          <template #default="scope">
            <div v-if='scope.row.ban_mobile == 1'>
              否
            </div>
            <div style="color: #ff0000" v-else>
              是
            </div>
          </template>
        </el-table-column>
        <el-table-column prop='ip_whitelist' label='ip白名单' />
        <el-table-column label='操作' width='400'>
          <template #default='scope'>
            <Update @click='open(scope.row.id)' />

<!--            <el-button-group class="ml-1">-->
<!--              <el-button type="primary" size="small">跳转模式</el-button>-->
<!--              -->
<!--              <el-button type="primary" size="small">API模式</el-button>-->
<!--            </el-button-group>-->
            <el-button type="primary" size="small" @click="download('/jump/jumpFile'+queryParams(scope.row))" >文件下载</el-button>
            <el-button class="ml-1" type="primary" size="small" @click='copyLinkHandle(scope.row.uuid)'>测试</el-button>
            <Destroy @click='destroy(api, scope.row.id)' />
          </template>

        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model='visible' :title='title' destroy-on-close>
      <Create @close='close(reset)' :primary='id' :api='api' :country-list='countryList'/>
    </Dialog>
  </div>
</template>

<script lang='ts' setup>
import { computed, onMounted, ref, unref } from 'vue'
import { useGetList } from '@/composables/curd/useGetList'
import { useDestroy } from '@/composables/curd/useDestroy'
import { useOpen } from '@/composables/curd/useOpen'
import Create from './form/create.vue'
import http from '@/support/http'
import { Code } from '@/enum/app'
import Message from '@/support/message'
import internal from 'stream'
import { useUserStore } from '@/stores/modules/user'
import { getBaseUrl, queryParams } from '@/support/helper'
import { useExcelDownload } from '@/composables/curd/useExcelDownload'
import useClipboard from 'vue-clipboard3'
const api = '/jump/list'
const { toClipboard } = useClipboard()
const {
  data,
  query,
  search,
  reset,
  loading
} = useGetList(api)
const {
  destroy,
  deleted
} = useDestroy()
const {
  open,
  close,
  title,
  visible,
  id
} = useOpen()
const { download } = useExcelDownload()
const userStore = useUserStore()
const roles = userStore.getRoles
console.log(roles,'-----------roles---------------')
const tableData = computed(() => data.value?.data)
const shortcuts = [
  {
    text: '昨天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 )
      return [start, end]
    },
  },
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '一个月前',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '三个月前',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

interface CompanyListItem {
  value: string
  label: string
}
const countryList = ref<CompanyListItem[]>([])
const getCountry = () => {
  http.get('/jump/countryList', unref({}))
    .then(r => {
      if (r.data.code === Code.SUCCESS) {
        countryList.value = r.data.data.map((item) => {
          return { value: `${item.code}`, label: `${item.name}` }
        })
      } else {
        Message.error(r.data.message)
      }
    })
}
const downFile = (data) => {
  http.post('/jump/jumpFile', data)
    .then(r => {
      if (r.data.code === Code.SUCCESS) {
       // console.log(r.data)
        const downloadLink = document.createElement('a')
        const blob = new Blob([r.data], { type: r.headers['content-type'] })
        downloadLink.href = URL.createObjectURL(blob)
        downloadLink.download = decodeURI(r.headers.filename)
        document.body.appendChild(downloadLink)
        downloadLink.click()
        document.body.removeChild(downloadLink)
      } else {
        Message.error(r.data.message)
      }
    })
}

// 复制链接
const copyLinkHandle = async (uuid) => {
  await toClipboard(getBaseUrl()+'/api/check/test?uuid='+uuid)
  Message.success("复制成功")
};
onMounted(() => {
  search()
  getCountry()
  deleted(reset)
})
</script>
